<template>
	<div id="tmpl">
	  <div id="cate">
	  	<ul v-bind="{style:'width:'+ulWidth+'px'}">
	  		<li @click="getimgls(0)">全部</li>
	  		<li v-for="item in list" @click="getimgls(item.id)">
	  				{{item.title}}
	  		</li>
	  	</ul>
	  </div>
    
    <div id="imglist">
    <ul>
        <li v-for="item in imgls">
         <router-link v-bind="{to:'./photosinfo/'+item.id}">
         	<img v-lazy="item.img_url">
          <div id="desc">
          	<h5>{{item.title}}</h5>
          	<p>{{item.zhaiyao}}</p>
          </div>
         </router-link>
        </li>
    </ul>
    </div>
	</div>
</template>

<script>
	import commen from "../../kits/commen.js";
	
	export default{
		data(){
			return{
				list:'',
				ulWidth:320,
				imgls:[],
			}
			},
			created(){
				this.getimg();
				this.getimgls();
			},
			methods:{
				getimgls(id){
					id=id||0;
					var url=commen.apidomain+"/api/getimages/"+id
					this.$http.get(url).then(function(res){
						if(res.body.status!=0){
							return;
						}
						this.imgls=res.body.message;
					})
				},
				getimg(){
					var url=commen.apidomain+"/api/getimgcategory";
					this.$http.get(url).then(function(res){
						if(res.body.status!=0){
							return;
						}
						this.list=res.body.message;
						var w=62;
					var count=res.body.message.length+1
					this.ulWidth=w*count;
					})
					
				}
			}
		}
	
</script>

<style scoped>
/*1.0 图片分类*/
	#cate{
		width: 375px;
		max-width: 375px;
		overflow-x: auto;
	}
	#cate ul{
		margin: 0px;
		padding-left: 10px;
	}
	#cate li{
		cursor: pointer;
		list-style: none;
		display: inline-block;
		color:#0094ff;
		font-size: 14px;
		padding-left: 6px;
	}

	/*实现图片列表样式*/
	#imglist{

	}
	#imglist ul {
		padding-left: 0px;
	}
	#imglist li{
		list-style:none;
		position: relative ;
	}
	#imglist img{
		width:100%;
		height: 300px;
	}

	#desc{
		width: 100%;
		background-color: rgba(0,0,0,0.2);
		position: absolute;
		bottom: 2px;
		left: 0px;
	}

#desc h5{
	color: #ffffff;
	font-weight: bold;
}
#desc p{
	color:#fff;
}

image[lazy=loading] {
	width: 40px;
	height: 300px;
	margin: auto;
}
</style>
